<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优惠卷详情页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../utils/flexible.js"></script>
    <link rel="stylesheet" href="../css/couponproduct.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <button>返回</button>
        <p>优惠卷</p>
        <img src="../images/header_app.png" alt="">
    </header>
    
    <p>--点餐前出示手机中的优惠券，即可享受优惠--</p>
    
    
    <!-- 优惠卷列表container -->
    <ul class="container">

    </ul>
   
    <!-- 轮播图 -->
    <div class="lunbotu">
        <p class="center">
            <img src="../images/kfc-1.jpg" alt="">
        </p>
        <div class="quchu">&times;</div>
        <div class="left"> < </div>
        <div class="right"> > </div>
    </div>
    

    <!-- 底部 -->
    <footer>
        <ul>
            <li>登录</li>
            <li>注册</li>
            <li class="returntop">返回顶部</li>
        </ul>
        <p>
            手机APP下载慢慢买手机版-掌上比价平台<br>
            m.manmanbuy.com
        </p>
    </footer>
</body>
</html>

<script>
    // 返回上一级
    let bn=document.querySelector('button');
    bn.addEventListener('click',function(){
        history.go(-1);
    })

  // 解析url
  let href = location.href;
    console.log(href);
    function getUrlParams(url) {
        //1.对url进行处理,把?号后面的参数匹配出来,使用正则进行匹配
        //http://127.0.0.1:5500/detail.html?id=20&age=99
        let reg = /^[^\s]+\?([^&\s\d]+=[^\s]+)*/
        let match = reg.exec(url)
        match = match[1]
        if (!match) {//表示没匹配到
            console.warn("没有匹配到相应的query参数")
            return null
        }
        // console.log(match);
        //对参数进行uri解码
        let queryString = decodeURI(match);
        // console.log(queryString);
        //将queryString以"&"符号为分割点 切割成为一个数组
        let queryArr = queryString.split("&");
        // console.log(queryArr);
        let queryParamsObj = {}//用于存储处理好的query数据
        queryArr.forEach(item => {
            let itemArr = item.split("=") //对每个item 'id=20'这样的切割成['id','20']
            queryParamsObj[itemArr[0]] = itemArr[1]
        })
        // console.log(queryParamsObj);
        //将最终处理的结果返回
        return queryParamsObj
    }
    let qr = getUrlParams(href)
    console.log(qr);
    let { couponid } = qr;//解构传递过来的productid这个参数
    console.log(couponid);

    //根据获取的productid向后端发送请求

    $.ajax({
        url: "http://chst.vip:1234/api/getcouponproduct",
        data: {
            couponid
        }
    })
        .then(res => {
            console.log(res);
            //混合解构 {result: [{...}]}
            // let { result: [info] } = res; //使用混合解构的方式 将对象中的数组中的第一项解构出来
            // console.log(info);
            data=res.result;
            let html=''
            data.forEach(info=>{
                html+= `
                <li>
                    ${info.couponProductImg}
                    <h1>${info.couponProductName}</h1>
                    <h2>${info.couponProductPrice}</h2>
                    <h3>${info.couponProductTime}</h3>
                </li>
            `
            })
            $(".container").html(html);


            // 给li注册点击事件
            $('.container').on('click','li',function(){
                $('.lunbotu').animate({
                    top:0
                })
            })
            
            // 给×注册点击事件
            $('.lunbotu .quchu').on('click',function(){
                $('.lunbotu').animate({
                    top:-675
                })
            })
            
            // 给左按钮注册点击事件
            let i=1;
            $('.lunbotu .left').on('click',function(){
                i++;
                if(i>5) i=1;
                $('.lunbotu .center img').prop("src",`../images/kfc-${i}.jpg`)
            })

            // // 给右按钮注册点击事件
            $('.lunbotu .right').on('click',function(){
                i--;
                if(i<1) i=5;
                $('.lunbotu .center img').prop("src",`../images/kfc-${i}.jpg`)
            })


        })



   


    // 返回顶部
    $('footer .returntop').click(function(e){
        document.documentElement.scrollTop=0;
        console.log(456);
    })
















</script>